<template>
    <div class="bottom">
        <input type="checkbox" name="" id="" @click="handlechangeAllState()" v-model="state"><span>全选</span>
        <span>{{count}}</span>
        <button @click="handlerDelete()">删除已完成内容</button>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs,onMounted } from 'vue'
import { deleteAllchanged, changeAllState, getState } from '../request/api'
import $bus from '../utils/bus'

let data = reactive({
    state: false,
    count:0
})
const handlerDelete = async () => {
    let res = await deleteAllchanged()
    $bus.emit('fetchtodoList')
    $bus.emit('getState')
}
const handlechangeAllState = async () => {
    let res = await changeAllState()
    $bus.emit('fetchtodoList')
    fetchState()
}
onMounted(()=>{
    fetchState()
    $bus.on('getState',fetchState)
})
const fetchState = async () => {
    let result = await getState()
    data.state = result.data.state
    data.count = result.data.count
}
let { state,count } = toRefs(data)
</script>

<style scoped>
.bottom {
    height: 50px;
    width: 100%;
    position: relative;
    padding: 0 10px;
}
.bottom button {
    position: absolute;
    right: 10px;
    background-color: #ff7b85;
    border: none;
    outline: none;
    padding:  1px 10px;
    color: white;
    font-weight: 800;
    font-size: 14px;
}
.bottom span {
    color: #e3e3e3;
    max-width: 70%;
    width: 80%;
    padding-left: 10px;
}
</style>